<template>
  <el-dialog v-model="showDialog" title="绘制线设置" width="350" draggable :modal="false" overflow
    :close-on-click-modal="false" :append-to-body="true" :id="props.dioid" :style="{
      top: '15%',
      left: '6%',
      margin: '0',
      maxHeight: '700px',
      overflow: 'auto',
    }" :align-center="false" @close="onCancel">
    <el-form :model="props.polylinefrom" label-width="80px">
      <el-form-item label="类型:">
        <el-input v-model="props.polylinefrom.Leixing"> </el-input>
      </el-form-item>
      <el-form-item label="线宽">
        <el-input-number @change="changefrom" :min="1" v-model="props.polylinefrom.LineStyle.LineWidth" />
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="props.polylinefrom.LayerName" />
      </el-form-item>
      <template v-for="(item, index) in props.polylinefrom.Point" :key="index">
        <label>点位{{ index + 1 }}</label>
        <el-form-item label="经度">
          <el-input @change="changefrom" type="number" v-model="item.Lon" />
        </el-form-item>
        <el-form-item label="纬度">
          <el-input @change="changefrom" type="number" v-model="item.Lat" />
        </el-form-item>
        <el-form-item label="高度">
          <el-input @change="changefrom" type="number" v-model="item.Alt" />
        </el-form-item>
      </template>


      <el-form-item label="线颜色">
        <el-color-picker @active-change="changecolor" @blur='changefrom'
          v-model="props.polylinefrom.LineStyle.ColorData" show-alpha />
      </el-form-item>

      <el-form-item label="描述">
        <el-input :autosize="{ minRows: 2 }" type="textarea" v-model="props.polylinefrom.DesValue" />
      </el-form-item>
    </el-form>

    <!-- <el-form :model="form" label-width="80px">
      <el-form-item label="图层名">
        <el-input v-model="form.LayerName" />
      </el-form-item>
      <template v-for="(item, index) in props.initialPosition" :key="index">
        <label>点位{{ index + 1 }}</label>
        <el-form-item label="经度">
          <el-input type="number" v-model="item.Lon" />
        </el-form-item>
        <el-form-item label="纬度">
          <el-input type="number" v-model="item.Lat" />
        </el-form-item>
        <el-form-item label="高度">
          <el-input type="number" v-model="item.Alt" />
        </el-form-item>
      </template>

    
      <el-form-item label="线颜色">
       
        <el-color-picker @change="colorChange" v-model="colorPickerValue" show-alpha />
      </el-form-item>
      <el-form-item label="线宽">
        <el-input-number :min="1" :max="5" v-model="form.LineStyle.LineWidth" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input :autosize="{ minRows: 2 }" type="textarea" v-model="form.DesValue" />
      </el-form-item>
    </el-form> -->

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, getCurrentInstance } from "vue";
import { ColorStyle } from '@/utils/compnt.js'
import { postAddDrawLine2, putDrawLine2 } from "@/api";
const { proxy } = getCurrentInstance();
const props = defineProps({
  showDrawDialog: {
    type: Boolean,
    default: false,
  },
  dioid: {
    type: String,
    default: "",
  },
  polylinefrom: {
    type: Object,
    default: () => { },
  },
  isapi: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['polylinefromcol'])



const submitForm = async () => {
  props.polylinefrom.Point.forEach(element => {
    console.log(element);
    element.Lon = Number(element.Lon)
    element.Lat = Number(element.Lat)
    element.Alt = Number(element.Alt)
  });

  try {
    if (props.isapi) {

      const response = await putDrawLine2(props.polylinefrom);
      console.log("请求成功:", response);
    } else {
      const response = await postAddDrawLine2(props.polylinefrom);
      console.log("请求成功:", response);
    }
    proxy.$mitt.emit("getsubmit")
    onCancel()
    // 可以在这里处理响应数据
  } catch (error) {
    console.error("请求失败:", error);
    // 可以在这里处理错误信息
  }

};
const onCancel = () => {
  const event = new CustomEvent("draw-polyline-cancel");
  window.dispatchEvent(event);
};
//===========================

const showDialog = ref(props.showDrawDialog);
// 监听 props 变化以同步本地状态
watch(
  () => props.showDrawDialog,
  (newValue) => {
    showDialog.value = newValue;
  }
);




const changecolor = (color) => {
  props.polylinefrom.LineStyle.ColorData = color

  props.polylinefrom.LineStyle.LineColor = ColorStyle(color, 1)
}
const changefrom = () => {
  emits('polylinefromcol', props.polylinefrom)


}


</script>